﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Editable DataGrid - jQuery EasyUI Demo</title>
	<link href="../easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../easyui/themes/icon.css" rel="stylesheet" type="text/css" />
    <script src="../easyui/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script src="../easyui/jquery.easyui.min.js" type="text/javascript"></script>
	<script type="text/javascript">
//		var products = [
//		    {productid:'FI-SW-01',name:'Koi'},
//		    {productid:'K9-DL-01',name:'Dalmation'},
//		    {productid:'RP-SN-01',name:'Rattlesnake'},
//		    {productid:'RP-LI-02',name:'Iguana'},
//		    {productid:'FL-DSH-01',name:'Manx'},
//		    {productid:'FL-DLH-02',name:'Persian'},
//		    {productid:'AV-CB-01',name:'Amazon Parrot'}
//		];
//		function productFormatter(value){
//			for(var i=0; i<products.length; i++){
//				if (products[i].productid == value) return products[i].name;
//			}
//			return value;
//		}
		$(function(){
			var lastIndex;
			$('#tt').datagrid({
				toolbar:[{
					text:'append',
					iconCls:'icon-add',
					handler:function(){
						$('#tt').datagrid('endEdit', lastIndex);
						$('#tt').datagrid('appendRow',{
							xh:'',
							jh:'',
							listprice:'',
							unitprice:'',
							attr1:'',
							status:'P'
						});
						lastIndex = $('#tt').datagrid('getRows').length-4;
						$('#tt').datagrid('selectRow', lastIndex);
						$('#tt').datagrid('beginEdit', lastIndex);
					}
				},'-',{
					text:'delete',
					iconCls:'icon-remove',
					handler:function(){
						var row = $('#tt').datagrid('getSelected');
						if (row){
							var index = $('#tt').datagrid('getRowIndex', row);
							$('#tt').datagrid('deleteRow', index);
						}
					}
				},'-',{
					text:'accept',
					iconCls:'icon-save',
					handler:function(){
						$('#tt').datagrid('acceptChanges');
					}
				},'-',{
					text:'reject',
					iconCls:'icon-undo',
					handler:function(){
						$('#tt').datagrid('rejectChanges');
					}
				},'-',{
					text:'GetChanges',
					iconCls:'icon-search',
					handler:function(){
						var rows = $('#tt').datagrid('getChanges');
						alert('changed rows: ' + rows.length + ' lines');
					}
				}],
				onBeforeLoad:function(){
					$(this).datagrid('rejectChanges');
				},
				onClickRow:function(rowIndex){
					if (lastIndex != rowIndex){
						$('#tt').datagrid('endEdit', lastIndex);
						$('#tt').datagrid('beginEdit', rowIndex);
					}
					lastIndex = rowIndex;
				}
			});
		});
	</script>
</head>
<body>
	<h2>Editable DataGrid</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip"></div>
		<div>Click the row to start editing.</div>
	</div>
	
	<table id="tt" style="width:700px;height:auto"
			data-options="iconCls:'icon-edit',singleSelect:true,idField:'xh',url:'Handler1.ashx'"
			title="Editable DataGrid">
		<thead>
			<tr>
				<th data-options="field:'xh',width:80">序号</th>
				<th data-options="field:'jh',width:80">井号</th>
                <th data-options="field:'qyrq',width:80">日 期</th>
                <th data-options="field:'c2',width:80">数据1</th>
                <th data-options="field:'n2',width:80">危险级别</th>
				<!--<th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th>
				<th data-options="field:'attr1',width:250,editor:'text'">Attribute</th>
				<th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th>-->
			</tr>
		</thead>
	</table>
	
</body>
</html>